<template>
	<view>
		<u-popup class="showPopup" v-model="showNewCustom" :isTransparent="true" mode="center" :mask-close-able="false">
			<view :class="{ is_gray: isGrayFilter }">
				<view class="newCustomPopupBackground" :style="{ backgroundImage: 'url(' + $setting.imgUrl() + '/static/xinrentanchuang.png' +')' }">
					<view class="newCustomWhite">
						<scroll-view :scroll-y="true" class="newCustomList" style="height: 200px;overflow: scroll;">
							<view style="height: 20rpx;"></view>
							<view class="oneOfDetailInCustomNew flex u-row-between flex-align-center" v-for="(item,index) in couponLists"
						:key="index">
								<view class="youHuiQuanLeft">
									<view class="unit">￥{{item.reduce_price}}</view>
									<view class="arrive">满{{item.min_price}}可用</view>
								</view>
								<view class="ling" @click="postReceiveList(item.coupon_id)">领取</view>
							</view>
							<view style="height: 140rpx;"></view>
						</scroll-view>

					</view>
					<view class="newCustomButton" @click="postReceiveList">一键领取</view>
					<!-- <view class="newCustomButton" style="margin-top: 82rpx;" @click="zhuanQv">新人专区</view> -->
					<image class="newCustomBottom" :src="$setting.imgUrl()+'/static/newCustomBottom.png'" mode="" style=""></image>
				</view>

			</view>
			<view class="closebleAtShowNewCustom" @click="noShow"><u-icon name="close"></u-icon></view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "ShowNewCustom",
		props:{
			couponLists: {
				type: [Object, Array],
				default: () => {
					return []
				}
			},
			showNewCustom: {
				type: Boolean,
				default: true
			},
			userInfo:{
				type: Object,
				default:{}
			},
			isGrayFilter: {
				type:Boolean,
				default: false
			}
		},
		data() {
			return {
			
			};
		},
		onLoad() {
			
		},
		methods: {
			noShow(){
				this.$emit('noShow',true)
			},
			ling(coupon_id){
				console.log('coupon_id',coupon_id)
				// let coupon_id = coupon_id;
				uni.$u.api.postReceiveOne({
					coupon_id
				}).then(res => {
					// this.$emit('hideCouponModal', false)
					uni.showToast({
						title: "领取成功"
					})
				})
			},
			postReceiveList() {
				console.log(this.userInfo)
				if(!this.userInfo||uni.$u.test.isEmpty(this.userInfo.userInfo.mobile)) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				let coupon_ids = [];
				this.couponLists.forEach((item,key) => {
					coupon_ids.push(item.coupon_id)
				})
				uni.$u.api.postReceiveList({
					coupon_ids
				}).then(res => {
					this.$emit('hideCouponModal', false)
					uni.showToast({
						title: "领取成功"
					})
				})
			},
			zhuanQv(){
				uni.navigateTo({
					url: '/pages_sub/new_custom_free/new_custom_free',
				});
			}
		}
	}
</script>

<style lang="scss">
	.closebleAtShowNewCustom{
		width: 650rpx;
		display: flex;
		justify-content: center;
		padding-top: 30px;
		// position: fixed;
		font-size: 30px;
		color: #fff;
	}
	.newCustomPopupBackground {
		padding-top: 286rpx;
		padding-left: 86rpx;
		width: 650rpx;
		height: 800rpx;
		position: relative;
		background-size: 100% 100%;
		// background-image: url('https://devadmin.jiumaioda.com/static/xinrentanchuang.png');
		overflow: hidden;
		
		.newCustomWhite {
			width: 478rpx;
			height: 24vh;
			background-color: #fff;
			// mix-blend-mode: multiply;
			padding: 0rpx 27rpx;
		}

		.oneOfDetailInCustomNew {
			width: 100%;
			height: 120rpx;
			background-color: aquamarine;
			margin-bottom: 10rpx;

			// width: 262px;
			// height: 70px;
			border-radius: 6px;
			opacity: 1;

			background: linear-gradient(270deg, #FF2129 0%, #FF5555 67%);
			padding: 10rpx;

			// .youHuiQuan {
			// 	width: 200rpx;
			// 	height: 100rpx;
			// 	position: absolute;
			// }
			.ling{
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 20px;
				text-align: center;
				letter-spacing: 0em;
				
				color: #FFFFFF;
				padding-right: 50rpx;
			}
		}

		.newCustomList {
			// height: 350px;
		}

		.newCustomButton {
			width: 450rpx;
			height: 60rpx;
			border-radius: 22.5px;
			opacity: 1;
			background: linear-gradient(90deg, #FFC64E 0%, #FFE69C 100%);
			font-family: PingFang SC;
			font-size: 15px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #9F3D00;
			margin-left: 15rpx;
			margin-top: 50rpx;
			z-index: 27;
			position: absolute;
		}

		.youHuiQuanLeft {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width: 200rpx;
			height: 100rpx;
			background-size: 100% 100%;
			
			background-image: url();
			.unit{
				font-family: PingFang SC;
				font-size: 24px;
				font-weight: normal;
				line-height: 28px;
				letter-spacing: 0em;
				
				color: #EE3A32;
			}
			.arrive{
				font-family: PingFang SC;
				font-size: 12px;
				font-weight: normal;
				line-height: 20px;
				letter-spacing: 0em;
				
				color: #EE3A32;
			}
		}
	}
	.newCustomBottom {
		// z-index: 5;
		// position: fixed;
		// width: 484rpx;
		// bottom: 173px;
		// height: 224rpx;
		z-index: 5;
		position: absolute;
		width: 502rpx;
		height: 250rpx;
		bottom: 0vh;
		margin-left: -9px;
	}
	.is_gray {
		filter: grayscale(100%);
	}
</style>